<template>
  <div class="FooterMusic" v-show="isFooterMusic">
    <div class="footerLeft" @click="updateDetailShow">
      <img :src="playlist[playlistIndex].al.picUrl" alt="" />
      <div>
        <p>{{ playlist[playlistIndex].name }}</p>
        <span>横划切换上下首</span>
      </div>
    </div>
    <div class="footerRight">
      <span v-if="isbtnShow" @click="play">O</span>
      <span v-else @click="play">X</span>
      <span>X</span>
    </div>
    <audio
      ref="Audio"
      :src="`https://music.163.com/song/media/outer/url?id=${playlist[playlistIndex].id}.mp3 `"
    ></audio>
    <van-popup
      v-model:show="detailShow"
      position="right"
      :style="{ height: '100%', width: '100%' }"
    >
      <MusicDetail
        :playMusicDetial="playlist[playlistIndex]"
        :play="play"
        :isbtnShow="isbtnShow"
        :addDuration="addDuration"
      ></MusicDetail>
    </van-popup>
  </div>
</template>

<script>
import MusicDetail from "./MusicDetail.vue";
import { mapMutations, mapState } from "vuex";
export default {
  components: {
    MusicDetail,
  },
  data() {
    return {
      timer: 0,
      // detailShow:false
    };
  },
  updated() {
    this.$store.dispatch("getLyric", this.playlist[this.playlistIndex].id);
    //进度条
    this.addDuration()
  },
  computed: {
    ...mapState(["playlist", "playlistIndex", "isbtnShow", "detailShow",'isFooterMusic']),
  },
  mounted() {
    // console.log(this.$refs);
    this.$store.dispatch("getLyric", this.playlist[this.playlistIndex].id);
    this.updateTime()
  },
  methods: {
    play() {
      if (this.$refs.Audio.paused) {
        this.$refs.Audio.play();
        this.updateIsbtnShow(false);
        this.updateTime();//播放就调用函数进行传值
      } else {
        this.$refs.Audio.pause();
        this.updateIsbtnShow(true);
        clearInterval(this.timer);//清除定时器
      }
    },
    updateTime() {
     this.timer = setInterval(() => {
        this.updateCurrentTime(this.$refs.Audio.currentTime);
      }, 1000);
    },
    addDuration(){
      this.updateDuration(this.$refs.Audio.duration)
    },
    ...mapMutations([
      "updateIsbtnShow",
      "updateDetailShow",
      "updateCurrentTime",
      "updateDuration"
    ]),
  },
  watch: {
    playListIndex: function () {
      // 监听如果下标发生变化，就自动播放
      this.$refs.Audio.autoplay = true;
      if (this.$refs.Audio.paused) {
        // 如果是暂停状态就改变图标
        this.updateIsbtnShow(false);
      }
    },
    playlist: function () {
      if (this.isbtnShow) {
        this.$refs.Audio.autoplay = true;
        this.updateIsbtnShow(false);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.FooterMusic {
  width: 100%;
  height: 1.4rem;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  border-top: 1px solid #999;
  display: flex;
  padding: 0.2rem;
  justify-content: space-between;
  .footerLeft {
    width: 60%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    img {
      width: 1rem;
      height: 1rem;
      border-radius: 50%;
    }
  }
  .footerRight {
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .icon {
      width: 0.6rem;
      height: 0.6rem;
    }
  }
}
</style>